<template>
	<view id="asset_container">
		<!-- 总资产 -->
		<view class="total_asset">
			<image class="total_asset_bk" src="../../static/asset/bk.jpg" mode=""></image>
			<view class="total_asset_text">
				总资产
			</view>
			<view class="total_asset_value">
				￥<span class="total_asset_value_n">{{ totalAsset }}</span>
			</view>
		</view>
		<!-- 账户列表 -->
		<view class="account_list_box">
			<!-- 顶部信息和操作栏 -->
			<view class="account_list_top">
				<view class="account_list_top_text">
					资金账户（{{ assetAccountData.length }}）
				</view>
				<view class="account_list_top_addBtn" @click="gotoAssetAccountPage('add', '')">
					<image src="../../static/asset/add.png" mode="heightFix"></image>
				</view>
			</view>
			<!-- 列表项 -->
			<view class="account_list">
				<view class="account_item" 
					v-for="(item, index) of assetAccountData" 
					:key="index"
					:class="{'not_first_account': index != 0}"
					@click="gotoAssetAccountPage('edi', item)"
					>
					<view class="account_item_left">
						<view class="account_item_icon">
							<image :src="baseUrl + item.icon" mode="heightFix"></image>
						</view>
						<view class="account_item_name">
							{{ item.name }}
						</view>
					</view>
					<view class="account_item_balance">
						{{ item.balance }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";

onShow(()=>{
	getUserAccount();
})

onMounted(()=>{
	getUserAccount();
})

// 总资产
let totalAsset = ref(0.00);
// 所有资金账户
let assetAccountData = ref([]);

// 图片基础路径
let baseUrl = uni.$baseUrl

// 获取用户所有账户，动态计算总资产
async function getUserAccount() {
    // 获取当前登录用户信息
    let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
    
    const res = await uni.$http.get(`/assetAccounts/getAllByUserId/${userInfo.id}`);
    
    // 资金账户为空
    if(res.data.code == 0){
        uni.$showT(res.data.msg);
        totalAsset.value = 0.00;
        return 0;
    }
    
    // 根据所有资金账户计算出总资产
    totalAsset.value = 0.00;  // 确保初始值为 0
    for (let item of res.data.data) {
        totalAsset.value += parseFloat(item.balance);
		item.balance = item.balance.toFixed(2);
    }

    // 在累加完成后，确保 totalAsset 保留两位小数
    totalAsset.value = totalAsset.value.toFixed(2);
    
    // 数据存储起来
    assetAccountData.value = res.data.data;
	
	// console.log(assetAccountData.value);
}

// 跳转资产账户编辑/新增页面
function gotoAssetAccountPage(ops, data){
	let dataP = JSON.stringify(data);
	uni.navigateTo({
		url:`/subPkg1/asset_account/asset_account?ops=${ops}&data=${dataP}`
	})
}

</script>

<style lang="scss" scoped>
#asset_container{
	box-sizing: border-box;
	width: 97vw;
	margin: 0 auto;
	
}	
	
.total_asset{
	padding: 35rpx 25rpx;
	border-radius: 15rpx;
	position: relative;
	box-sizing: border-box;
}

.total_asset_bk{
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: -1;
	top: 0px;
	left: 0px;
	border-radius: 15rpx;
}


.total_asset_text{
	font-size: 14px;
}

.total_asset_value{
	margin-top: 10rpx;
	padding: 10rpx 0px;
}

.total_asset_value_n{
	font-size: 18px;
	font-weight: 600;
}

.account_list_box{
	margin-top: 10px;
	background-color: #fff;
	border-radius: 15rpx;
	overflow: hidden;
	padding: 15rpx 0px;
	font-size: 14px;
}

.account_list_top_addBtn image{
	height: 23px;
}

.account_list_top{
	display: flex;
	justify-content: space-between;
	padding: 6rpx 20rpx;
}

.account_item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	// border: solid red 1px;
	padding: 20rpx 20rpx;
	// margin-top: 10rpx;
}

.account_item_left{
	display: flex;
	align-items: center;
}

.account_item_icon{
	position: relative;
	top: 2px;
}

.account_item_name{
	position: relative;
	left: 8px;
}

.account_item_icon image{
	height: 28px;
}

.account_item_balance{
	font-weight: 600;
	font-size: 15px;
}

.not_first_account{
	border-top: solid 1px #e3e3e3;
}
</style>
